<!DOCTYPE html>
<html>
  <head>
    <title>fastlane/screengrab</title>
    <meta charset="UTF-8">
    <style type="text/css">
      * {
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 300;
      }
      .language {

      }
      .deviceName {
        display: block;
        font-size: 30px;
        padding-bottom: 24px;
        padding-top: 45px;
      }
      .screenshot {
        cursor: pointer;
        border: 1px #EEE solid;
        z-index: 0;
      }
      th {
        text-align: left;
      }
      td {
        text-align: center;
        min-width: 200px;
      }
      #overlay {
        position:fixed;
        top:0;
        left:0;
        background:rgba(0,0,0,0.8);
        z-index:5;
        width:100%;
        height:100%;
        display:none;
        cursor: zoom-out;
        text-align: center;
      }
      #imageDisplay {
        height: auto;
        width: auto;
        z-index: 10;
        cursor: pointer;
      }
      #imageInfo {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        color: white;
        margin: 20px;
        padding: 10px;
        position: absolute;
        right: 0;
        top: 0;
        width: 250px;
        z-index: -1;
      }
      #imageInfo:hover {
        z-index: 20;
      }
    </style>
  </head>
  <body>
    <% divide_size_by = 5.0 %>
    <% max_width = 180 %>
    <% image_counter = 0 %>


    <% @data.each do |language, content| %>
      <h1 class="language"><%= language %></h1>
      <hr>
      <table>
        <% content.each do |device_name, screens| %>
          <tr>
            <th colspan="<%= screens.count %>">
              <span class="deviceName"><%= device_name %></span>
            </th>
          </tr>
          <tr>
            <% screens.each do |screen_path| %>
              <% next if screen_path.include?"_framed.png" %>
              <td>
                <% style = "width: 100%;" %>
                <% image_counter += 1 %>
                <a href="<%= screen_path %>" target="_blank" class="screenshotLink">
                  <img class="screenshot"
                         src="<%= screen_path %>"
                       style="<%= style %>"
                         alt="<%= language %> <%= device_name %>"
                data-counter="<%= image_counter %>" />
                </a>
              </td>
            <% end %>
          </tr>
        <% end %>
      </table>
    <% end %>
      <div id="overlay">
        <img id="imageDisplay" src="" alt="" />
        <div id="imageInfo"></div>
      </div>
      <script type="text/javascript">
        var overlay        = document.getElementById('overlay');
        var imageDisplay   = document.getElementById('imageDisplay');
        var imageInfo      = document.getElementById('imageInfo');
        var screenshotLink = document.getElementsByClassName('screenshotLink');

        function doClick(el) {
          if (document.createEvent) {
            var evObj = document.createEvent('MouseEvents', true);
            evObj.initMouseEvent("click", false, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            el.dispatchEvent(evObj);
          } else if (document.createEventObject) { //IE
            var evObj = document.createEventObject();
            el.fireEvent('onclick', evObj);
          }
        }

        for (index = 0; index < screenshotLink.length; ++index) {
          screenshotLink[index].addEventListener('click', function(e) {
            e.preventDefault();
            
            var img = e.target;
            if (e.target.tagName == 'A') {
              img = e.target.children[0];
            }
            
            // beautify
            var tmpImg = new Image();
            tmpImg.src = img.src;
            imageDisplay.style.height     = 'auto';
            imageDisplay.style.width     = 'auto';
            if (window.innerHeight < tmpImg.height) {
              imageDisplay.style.height = document.documentElement.clientHeight+'px';
            } else if (window.innerWidth < tmpImg.width) {
              imageDisplay.style.width = document.documentElement.clientWidth;+'px';
            } else {
              imageDisplay.style.paddingTop = parseInt((window.innerHeight - tmpImg.height) / 2)+'px';
            }

            imageDisplay.src             = img.src;
            imageDisplay.alt             = img.alt;
            imageDisplay.dataset.counter = img.dataset.counter;
            
            imageInfo.innerHTML          = '<h3>'+img.alt+'</h3>';
            imageInfo.innerHTML         += img.src.split("/").pop();
            imageInfo.innerHTML         += '<br />'+tmpImg.height+'&times;'+tmpImg.width+'px';
                    
            overlay.style.display        = "block";
          });
        }
        
        imageDisplay.addEventListener('click', function(e) {
          e.stopPropagation(); // !
          
          overlay.style.display = "none";
          
          img_counter = parseInt(e.target.dataset.counter) + 1;
          try {
            link = document.body.querySelector('img[data-counter="'+img_counter+'"]').parentNode;
          } catch (e) {
            try {
              link = document.body.querySelector('img[data-counter="0"]').parentNode;
            } catch (e) {
              return false;
            }
          }
          doClick(link);
        });

        overlay.addEventListener('click', function(e) {
          overlay.style.display = "none";
        })
        
      function keyPressed(e) {
        e = e || window.event;
        var charCode = e.keyCode || e.which;
        switch(charCode) {
          case 27: // Esc
            overlay.style.display = "none";
            break;
          case 34: // right-arrow, Page Down, keypad right, ...
          case 39:
          case 54:
          case 102:
            e.preventDefault();
            doClick(imageDisplay);
            break;
          case 33: // left-arrow, Page Up, keypad right, ...
          case 37:
          case 52:
          case 100:
            e.preventDefault();
            document.getElementById('imageDisplay').dataset.counter -= 2; // hacky
            doClick(imageDisplay);
            break;
         }
      };
      document.body.addEventListener('keydown', keyPressed);
      </script>
  </body>
</html>
